<template>
    <div class="content">
      <!-- 科室列表-header>-->
      <div class="header-wrapper">
        <div class="header-flex"> 
          <!-- 名称 -->
          <div class="title">科室列表</div>
        <!-- 搜索科室框 -->
        <div class="department-search">
          <div class="search-input">
            <svg
              t="1610612525576"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2985"
              width="25"
              height="25"
            >
              <path
                d="M830.486464 796.124515 672.790943 638.42797c44.959904-52.799318 72.109099-121.232412 72.109099-196.016087 0-167.084182-135.448007-302.533214-302.53219-302.533214s-302.533214 135.449031-302.533214 302.533214 135.449031 302.53219 302.533214 302.53219c74.782651 0 143.215745-27.149196 196.017111-72.109099L796.101988 830.531518c9.499249 9.499249 24.885227 9.499249 34.384476 0S839.986737 805.623764 830.486464 796.124515zM442.366829 698.401131c-141.380814 0-255.989248-114.631985-255.989248-255.989248 0-141.403341 114.608434-255.989248 255.989248-255.989248 141.37979 0 255.989248 114.585907 255.989248 255.989248C698.356077 583.769146 583.747643 698.401131 442.366829 698.401131z"
                p-id="2986"
                fill="#999999"
              ></path>
            </svg>
            <input type="text" placeholder="点击输入科室名称" />
            <span>搜科室</span>
          </div>
          <!-- 动画效果 -->
          <!-- <div class="focus-line">aa</div> -->
        </div>
        </div>
      </div>
      <v-classify></v-classify>
    </div>
    
</template>

<script>
import Classify from "./sectionClassify";
export default {
  components: {
    "v-classify": Classify,
  },
  data() {
    return {};
  },
};
</script>

<style>
.sectionlist {
  width: 1200px;
  margin: 0px auto;
}
.content {
  width: 1200px;
  border: 1px solid #09c;
  margin: 0px auto;
  overflow: hidden;
  position: relative;
}
/* 科室列表-头部 */
.header-wrapper {
  height: 100px;
  margin-bottom: 20px;
}
.header-wrapper .header-flex{
   display: flex;
   border: 1px solid #666;
  line-height: 100px;
  margin-bottom: 20px;
  position: absolute;
  top: 0px;
  left:0px;
}
.header-wrapper .title,
.department-search {
  flex: 6;
  width: 600px;
}
.header-wrapper .title {
  text-align: left;
  letter-spacing: 1px;
  font-weight: 700;
  color: #333;
  font-size: 16px;
}
.header-wrapper .department-search {
  /* border: 1px solid #666; */
  text-align: right;
}
.header-wrapper .department-search .search-input {
  display: inline;
  border-bottom: 1px solid #eee;
  /* border: 1px solid #666; */
  padding: 10px 0px;
}
.header-wrapper .department-search .search-input svg {
  vertical-align: middle;
  padding-right: 2px;
}
.header-wrapper .department-search .search-input input {
  border: 0px;
  width: 200px;
  font-size: 14px;
}
.header-wrapper .department-search .search-input span {
  color: #4990f1;
  font-weight: 700;
  font-size: 14px;
}
.header-wrapper .department-search .search-input span:hover {
  cursor: pointer;
}
</style>